<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="__STATIC__/css/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript" src="__STATIC__/js/jquery-3.2.1.min.js"></script>
	<script src="__STATIC__/js/bootstrap.min.js"></script>
	 <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

	<!-- self-js/css -->
	<title>登录-Discuz320</title>
	<script src="__STATIC__/js/canvas-particle.js"></script>
    <style type="text/css">
		body{
			color: #969696;
			background:url('__STATIC__/image/login_bg.jpg');
		}
		.logo{
			
			margin-top: 56px;
		}
		.login{
			width:400px;
			height:574px;
			background: white;
			position: absolute;
			left:50%;
			margin-left: -200px;
			min-width: 400px;
			opacity: 0.9;
		}
		.login-main{
			margin-top: 60px;
		}
		.login > .header{
			width:100%;
			height:120px;
		}
		.login > .body{
			
		}
		
		.login-select{
		    margin-top: 55px;
		    position: absolute;
		    left: 50%;
		    margin-left: -54px;
		}
		.checkbox{
			margin: 0px;
		}
		.active {
		    font-weight: 700;
		    color: #ea6f5a;
		    border-bottom: 2px solid #ea6f5a;
		}
		.form-group{
			margin-bottom: 0px;

		}
		ul > li{
			list-style: none;
			float: left;
			margin-right: 20px;
		}
    </style>
  </head>
  <body>
  	  <div id="mydiv"></div>
      <div class="container-fluid" id="particles-js">
      	 <div class="row login-header">
      	 	<div class="col-md-1 col-md-offset-1">
      	 		<img src="http://cdn2.jianshu.io/assets/web/logo-58fd04f6f0de908401aa561cda6a0688.png" alt="" class="img-responsive logo">
      	 	</div>
      	 </div>
      	 <div class="row login-main">
  	 		<div class="col-md-3 col-xs-6 login">
  	 			<div class="header text-center">
  	 				<h4 class="login-select">
  	 					<a href="" class="active">登录</a>
  	 					&nbsp;<b>·</b>&nbsp;
  	 					<a href="" style="color:grey;">注册</a>
  	 				</h4>
  	 			</div>
  	 			<div class="body">
  	 				<form>
					  <div class="form-group">
					    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="手机号或邮箱" style="border-bottom:none;width:300px;height:50px;margin-left:35px;border-top-left-radius: 4px;border-top-right-radius: 4px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;">
					  </div>
					  <div class="form-group">
					    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码" style="width:300px;height:50px;margin-left:35px;border-radius:0px;border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-right-radius: 4px;border-bottom-left-radius: 4px;">
					  </div>

					  <div style="margin-top:20px;">
						  <div class="checkbox pull-left" style="margin-left:35px;">
						    <label>
						      <input type="checkbox"> 记住我	
						    </label>
						  </div>
						  <div class="dropdown">
							  <div class="forget-btn pull-right dropdown-toggle " style="margin-right:32px;" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
							  	  登录遇到问题?
							  </div>
							  <ul class="dropdown-menu pull-right text-center" aria-labelledby="dropdownMenu1" style="width:120px;margin-top:20px">
							    <li style="width:100%;"><a href="#">用手机号重置密码</a></li>
							    <li style="width:100%;"><a href="#">用邮箱重置密码</a></li>
							    <li style="width:100%;"><a href="#">账号找回申诉</a></li>
	  						  </ul>
						  </div>
					  </div>
					  
					  <button type="submit" class="btn btn-success btn-block btn-lg" style="width:300px;margin-left:35px;margin-top:20px;float:left;border-radius:25px;">登录</button>
					</form>
  	 			</div>
  	 			<div class="bottom" style="float:left;margin-left:70px;margin-top:40px;">
  	 				<p>————　社交账号登录　————</p>
  	 			</div>
  	 			<ul style="float:left;margin-left:42px;margin-top:30px;">
  	 				<li><a href=""><img src="__STATIC__/image/qq.png" alt=""></a></li>
  	 				<li><a href=""><img src="__STATIC__/image/wx.png" alt=""></a></li>
  	 				<li><a href=""><img src="__STATIC__/image/weibo.png" alt=""></a></li>
  	 			</ul>
  	 		</div>
      	 </div>
      </div>
  </body>
  <script type="text/javascript">

        window.onload = function() {
            //配置
            var config = {
                vx: 5,  //小球x轴速度,正为右，负为左
                vy: 5,  //小球y轴速度
                height: 2,  //小球高宽，其实为正方形，所以不宜太大
                width: 2,
                count: 150,     //点个数
                color: "121, 162, 185",     //点颜色
                stroke: "130,255,255",      //线条颜色
                dist: 6000,     //点吸附距离
                e_dist: 20000,  //鼠标吸附加速距离
                max_conn: 10    //点到点最大连接数
            }

            //调用
            CanvasParticle(config);
        }
    
  </script>
</html>